import create from 'zustand';

import { Action, OrganizationData, Status } from '../api/organization/organization';
import OrganizationManager from '../api/organization/organization-manager';

export interface PendingOrganizationActionState {
    action: Action;
    openBackdrop: boolean;
    openDialog: boolean;
    openActionDialog: boolean;
    loading: boolean;
    organisationName: string;
    organisationId: number;
    message: string;
    currentItems: OrganizationData[];
    handleNewItems: (items: OrganizationData[], status: Status) => void;
    handleClick: (action: Action, organization_id: number, organization_name: string) => void;
    closeDialog: () => void;
    setActionData: (action: Action, organization_id: number, organization_name) => void;
    closeActionDialog: () => void;
    deletedItems: number[];
}

export const usePendingOrganizationActionStore = create<PendingOrganizationActionState>((set) => ({
    action: null,
    openBackdrop: false,
    openDialog: null,
    loading: false,
    organisationId: 0,
    organisationName: '',
    message: '',
    currentItems: [],
    deletedItems: [],
    openActionDialog: false,
    handleNewItems(items: OrganizationData[], status: Status) {
        if (status === Status.Pending) {
            set((state) => ({
                currentItems: items.filter((item) => !state.deletedItems.includes(item.id))
            }));
        } else {
            set(() => ({
                currentItems: items
            }));
        }
    },

    setActionData(action: Action, organization_id: number, organization_name) {
        set(() => ({
            action: action,
            organisationId: organization_id,
            organisationName: organization_name,
            openActionDialog: true
        }));
    },

    closeActionDialog() {
        set(() => ({
            openActionDialog: false
        }));
    },

    handleClick: async (action: number, organization_id: number, organization_name) => {
        // show backdrop
        set(() => ({
            openActionDialog: false,
            openBackdrop: true,
            loading: true
        }));

        // send a request
        const res = await OrganizationManager.actionOrganization(action, organization_id);
        if (res.pendingOrganzizations === null) {
            // show a toast
            set(() => ({
                openBackdrop: false,
                openDialog: true,
                loading: false,
                message:
                    action === Action.Approved
                        ? "You're not authorized to approve this manager, Thank you!"
                        : "You're not authorized to deny this manager, you!",
                organisationId: 0,
                organisationName: ''
            }));
        } else {
            set((state) => ({
                deletedItems: [...state.deletedItems, organization_id]
            }));

            set((state) => ({
                openBackdrop: false,
                openDialog: true,
                loading: false,
                message:
                    action === Action.Approved
                        ? 'Organisation has been approved successfully.'
                        : 'Organisation has been denied successfully.',
                organisationId: organization_id,
                organisationName: organization_name,
                currentItems: state.currentItems.filter(
                    (item) => !state.deletedItems.includes(item.id)
                )
            }));
        }
    },
    closeDialog() {
        set(() => ({
            openDialog: false
        }));
    }
}));
